Czy można przełączyć widoczność elementu za pomocą funkcji .hide (), .show () lub .toggle ()?
Jak przetestowałbyś, czy element jest widoczny czy ukryty?
2020-12-07 21:54:08
1
2
Kolejny
Ponieważ pytanie odnosi się do pojedynczego elementu, ten kod może być bardziej odpowiedni:
// Sprawdza zawartość CSS pod kątem wyświetlania: [brak | blok], ignoruje widoczność: [prawda | fałsz]
$ (element) .is (": widoczny");
// To samo działa z ukrytymi
$ (element) .is (": ukryty");
Jest to to samo, co sugestia Twernta, ale zastosowane do pojedynczego elementu; i jest zgodny z algorytmem zalecanym w jQuery FAQ.
Używamy metody is () jQuery, aby sprawdzić wybrany element innym elementem, selektorem lub dowolnym obiektem jQuery. Ta metoda przeszukuje elementy DOM, aby znaleźć dopasowanie, które spełnia przekazany parametr. Zwróci true, jeśli istnieje dopasowanie, w przeciwnym razie zwróci false.
|
Możesz użyć ukrytego selektora:
// Dopasowuje wszystkie ukryte elementy
$ („element: ukryty”)
I widoczny selektor:
// Dopasowuje wszystkie widoczne elementy
$ („element: widoczny”)
|
if ($ (element) .css ('display') == 'none' || $ (element) .css ("visibility") == "hidden") {
// „element” jest ukryty
}
Powyższa metoda nie uwzględnia widoczności rodzica. Aby wziąć pod uwagę również rodzica, powinieneś użyć .is (": ukryty") lub .is (": widoczny").
Na przykład,
Div2
Powyższa metoda uzna div2 za widoczne, podczas gdy: visible nie. Ale powyższe może być przydatne w wielu przypadkach, zwłaszcza gdy trzeba sprawdzić, czy w ukrytym elemencie nadrzędnym są widoczne błędy div, ponieważ w takich warunkach: visible nie zadziała.
|
Żadna z tych odpowiedzi nie dotyczy tego, co rozumiem jako pytanie, czyli to, czego szukałem, „Jak obsłużyć elementy, które mają widoczność: ukryte?”. Ani: visible ani: hidden nie poradzi sobie z tym, ponieważ oba szukają wyświetlania zgodnie z dokumentacją. O ile mogłem ustalić, nie ma selektora do obsługi widoczności CSS. Oto jak to rozwiązałem (standardowe selektory jQuery, może być bardziej skondensowana składnia):
$ (". item"). each (function () {
if ($ (this) .css ("visibility") == "hidden") {
// obsługuje stan niewidoczny
} else {
// obsługa widocznego stanu
}
});
|
Od Jak określić stan przełączanego elementu?
Możesz określić, czy element jest zwinięty, czy nie, używając selektorów: visible i: hidden.
var isVisible = $ ('# myDiv'). is (': visible');
var isHidden = $ ('# myDiv'). is (': hidden');
Jeśli po prostu działasz na elemencie w oparciu o jego widoczność, możesz po prostu uwzględnić: visible lub: hidden w wyrażeniu selektora. Na przykład:
$ ('# myDiv: visible'). animate ({left: '+ = 200px'}, 'slow');
|
Często podczas sprawdzania, czy coś jest widoczne, czy nie, natychmiast idziesz do przodu i robisz z tym coś innego. Tworzenie łańcuchów jQuery ułatwia to.
Więc jeśli masz selektor i chcesz wykonać na nim jakąś akcję tylko wtedy, gdy jest widoczny lub ukryty, możesz użyć filtru („: visible”) lub filtra („: hidden”), a następnie powiązać go z akcją, którą chcesz brać.
Więc zamiast instrukcji if, na przykład:
if ($ ('# btnUpdate'). is (": visible"))
{
$ ('# btnUpdate'). animate ({width: "toggle"}); // Ukryj przycisk
}
Lub wydajniejszy, ale jeszcze brzydszy:
przycisk var = $ ('# btnUpdate');
if (button.is (": visible"))
{
button.animate ({width: "toggle"}); // Ukryj przycisk
}
Możesz to wszystko zrobić w jednej linii:
$ ('# btnUpdate'). filter (": visible"). animate ({width: "toggle"});
|
The: widoczny selektor według dokumentacji jQuery:
Mają wartość wyświetlaną CSS równą none.
Są to elementy formularza z typem = "ukryte".
Ich szerokość i wysokość są jawnie ustawione na 0.
Element nadrzędny jest ukryty, więc element nie jest wyświetlany na stronie.
Elementy z widocznością: ukryte lub nieprzezroczyste: 0 są uważane za widoczne, ponieważ nadal zajmują miejsce w układzie.
Jest to przydatne w niektórych przypadkach i bezużyteczne w innych, ponieważ jeśli chcesz sprawdzić, czy element jest widoczny (display! = None), ignorując widoczność rodziców, zobaczysz, że robi .css ("display") == 'none 'jest nie tylko szybsza, ale również poprawnie zwróci kontrolę widoczności.
Jeśli chcesz sprawdzić widoczność zamiast wyświetlania, powinieneś użyć: .css ("visibility") == "hidden".
Weź również pod uwagę dodatkowe uwagi jQuery:
Ponieważ: visible jest rozszerzeniem jQuery, a nie częścią specyfikacji CSS, zapytania używające: visible nie mogą korzystać ze zwiększenia wydajności zapewnianego przez natywną metodę DOM querySelectorAll (). Aby uzyskać najlepszą wydajność, używając: visible do wybierania elementów, najpierw wybierz elementy za pomocą czystego selektora CSS, a następnie użyj .filter (": visible").
Ponadto, jeśli martwisz się o wydajność, sprawdź Teraz widzisz mnie… pokaż / ukryj wydajność (2010-05-04). I użyj innych metod, aby pokazać i ukryć elementy.
|
To działa dla mnie i używam show () i hide (), aby mój div był ukryty / widoczny:
if ($ (this) .css ('display') == 'none') {
/ * twój kod jest tutaj * /
} else {
/ * logika alternatywna * /
}
|
Jak działa widoczność elementów i jQuery;
Element można ukryć za pomocą display: none,widoczność: ukryta lub krycie: 0. Różnica między tymi metodami:
display: żaden nie ukrywa elementu i nie zajmuje miejsca;
widoczność: ukryta ukrywa element, ale nadal zajmuje miejsce w układzie;
krycie: 0 ukrywa element jako „widoczność: ukryty” i nadal zajmuje miejsce w układzie; jedyną różnicą jest to, że krycie pozwala uczynić element częściowo przezroczystym;
if ($ ('. target'). is (': hidden')) {
$ ('. target'). show ();
} else {
$ ('. target'). hide ();
}
if ($ ('. target'). is (': visible')) {
$ ('. target'). hide ();
} else {
$ ('. target'). show ();
}
if ($ ('. target-visibility'). css ('visibility') == 'hidden') {
$ ('. target-visibility'). css ({
widoczność: "widoczne",
wyświetlacz: „”
});
} else {
$ ('. target-visibility'). css ({
widoczność: "ukryta",
wyświetlacz: „”
});
}
if ($ ('. target-visibility'). css ('opacity') == "0") {
$ ('. target-visibility'). css ({
krycie: "1",
wyświetlacz: „”
});
} else {
$ ('. target-visibility'). css ({
krycie: "0",
wyświetlacz: „”
});
}
Przydatne metody przełączania jQuery:
$ ('. click'). click (function () {
$ ('. target'). toggle ();
});
$ ('. click'). click (function () {
$ ('. target'). slideToggle ();
});
$ ('. click'). click (function () {
$ ('. target'). fadeToggle ();
});
|
Możesz to również zrobić za pomocą zwykłego JavaScript:
function isRendered (domObj) {
if ((domObj.nodeType! = 1) || (domObj == document.body)) {
powrót prawda;
}
if (domObj.currentStyle && domObj.currentStyle ["display"]! = "none" && domObj.currentStyle ["visibility"]! = "hidden") {
return isRendered (domObj.parentNode);
} else if (window.getComputedStyle) {
var cs = document.defaultView.getComputedStyle (domObj, null);
if (cs.getPropertyValue ("display")! = "none" && cs.getPropertyValue ("visibility")! = "hidden") {
return isRendered (domObj.parentNode);
}
}
return false;
}
Uwagi:
Działa wszędzie
Działa dla elementów zagnieżdżonych
Działa dla stylów CSS i wbudowanych
Nie wymaga ram
|
Użyłbym klasy CSS .hide {display: none! Important; }.
Aby ukryć / pokazać, wzywam .addClass ("hide") /. RemoveClass ("hide"). Aby sprawdzić widoczność, używam .hasClass ("ukryj").
Jest to prosty i przejrzysty sposób sprawdzania / ukrywania / pokazywania elementów, jeśli nie planujesz używać metod .toggle () lub .animate ().
|
Demo Link
$ ('# clickme'). click (function () {
$ ('# książka'). toggle ('wolno', funkcja () {
// Animacja zakończona.
alert ($ ('# książka'). is (": visible")); // <--- TRUE if Visible False if Hidden
});
});
Kliknij tutaj
Źródło:
Blogger Plug n Play - narzędzia i widżety jQuery: jak sprawdzić, czy element jest ukryty lub widoczny za pomocą jQuery
|
Można po prostu użyć atrybutu ukrytego lub widocznego, takiego jak:
$ („element: ukryty”)
$ („element: widoczny”)
Lub możesz uprościć to samo za pomocą następującego.
$ (element) .is (": widoczny")
|
ebdiv należy ustawić na style = "display: none;". Działa zarówno w przypadku pokazywania, jak i ukrywania:
$ (document) .ready (function () {
$ ("# eb"). click (function () {
$ ("# ebdiv"). toggle ();
});
});
|
Inną odpowiedzią, którą powinieneś wziąć pod uwagę, jest to, że jeśli ukrywasz element, powinieneś użyć jQuery, ale zamiast go ukrywać, usuwasz cały element, ale kopiujesz jego zawartość HTML i sam tag do zmiennej jQuery, wszystko, co musisz zrobić, to sprawdzić, czy na ekranie znajduje się taka zmienna, używając normalnego if (! $ ('# thetagname'). length).
|
Podczas testowania elementu pod kątem: hidden selector w jQuery należy wziąć pod uwagę, że bezwzględnie pozycjonowany element może zostać rozpoznany jako ukryty, mimo że jego elementy potomne są widoczne.
Przede wszystkim wydaje się to nieco sprzeczne z intuicją - chociaż bliższe przyjrzenie się dokumentacji jQuery daje istotne informacje:
Elementy można uznać za ukryte z kilku powodów: [...] Ich szerokość i wysokość są jawnie ustawione na 0. [...]
Więc to ma sens w odniesieniu do modelu pudełkowego i wyliczonego stylu elementu. Nawet jeśli szerokość i wysokość nie są jawnie ustawione na 0, mogą zostać ustawione niejawnie.
Spójrz na następujący przykład:
console.log ($ ('. foo'). is (': hidden')); // prawdziwe
console.log ($ ('. bar'). is (': hidden')); // fałszywy
.bla {
pozycja: bezwzględna;
po lewej: 10px;
top: 10px;
tło: # ff0000;
}
.bar {
pozycja: bezwzględna;
po lewej: 10px;
top: 10px;
szerokość: 20px;
wysokość: 20px;
tło: # 0000ff;
}
Aktualizacja dla jQuery 3.x:
Dzięki jQuery 3 opisane zachowanie ulegnie zmianie! Elementy będą uważane za widoczne, jeśli mają jakiekolwiek ramki układu, w tym te o zerowej szerokości i / lub wysokości.
JSFiddle z jQuery 3.0.0-alpha1:
http://jsfiddle.net/pM2q3/7/
Ten sam kod JavaScript będzie miał wtedy następujące dane wyjściowe:
console.log ($ ('. foo'). is (': hidden')); // fałszywy
console.log ($ ('. bar'). is (': hidden'));// fałszywy
|
To może zadziałać:
oczekiwać ($ ("# message_div"). css ("display")). toBe ("none");
|
Przykład:
$ (document) .ready (function () {
if ($ ("# checkme: hidden"). length) {
console.log ('Ukryty');
}
});
|
Aby sprawdzić, czy nie jest widoczny, używam!:
if (! $ ('# książka'). is (': visible')) {
alert („# książka nie jest widoczna”)
}
Lub następujący jest również sam, zapisujący selektor jQuery w zmiennej, aby uzyskać lepszą wydajność, gdy jest to potrzebne wiele razy:
var $ book = $ ('# książka')
if (! $ book.is (': visible')) {
alert („# książka nie jest widoczna”)
}
|
Użyj przełączania klas, a nie edycji stylu. . .
Korzystanie z klas przeznaczonych do „ukrywania” elementów jest łatwe i jednocześnie jest jedną z najbardziej wydajnych metod. Przełączenie klasy „ukrytej” ze stylem wyświetlania „brak” będzie działać szybciej niż bezpośrednia edycja tego stylu. Część z tego wyjaśniłem dość dokładnie w pytaniu o przepełnienie stosu Włączanie / ukrywanie dwóch elementów w tym samym div.
Sprawdzone metody JavaScript i optymalizacja
Oto naprawdę pouczające wideo z Google Tech Talk autorstwa inżyniera Google front-end Nicholasa Zakasa:
Przyspiesz swój JavaScript (YouTube)
|
Przykład użycia widocznego czeku na adblocker jest aktywowany:
$ (document) .ready (function () {
jeśli (! $ ("# ablockercheck"). is (": visible"))
$ ("# ablockermsg"). text ("Wyłącz adblocker."). show ();
});
„ablockercheck” to identyfikator blokowany przez adblocker. Więc sprawdzając, czy jest widoczny, jesteś w stanie wykryć, czy Adblocker jest włączony.
|
W końcu żaden z przykładów mi nie odpowiada, więc napisałem swój własny.
Testy (brak obsługi filtru Internet Explorer: alfa):
a) Sprawdź, czy dokument nie jest ukryty
b) Sprawdź, czy element ma zerową szerokość / wysokość / przezroczystość lub wyświetlanie: brak / widoczność: ukryte w stylach wbudowanych
c) Sprawdź, czy środek (również dlatego, że jest szybszy niż testowanie każdego piksela / rogu) elementu nie jest zakryty przez inny element (i wszystkich przodków, np. przepełnienie: ukryty / przewiń / jeden element nad drugim) czy krawędzie ekranu
d) Sprawdź, czy element ma zerową szerokość / wysokość / krycie lub wyświetlanie: brak / widoczność: ukryte w wyliczonych stylach (wśród wszystkich przodków)
Testowany
Android 4.4 (natywna przeglądarka / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac WebKit), Internet Explorer (Internet Explorer 5-11 tryby dokumentów + Internet Explorer 8 na maszyna wirtualna) i Safari (Windows / Mac / iOS).
var is_visible = (function () {
var x = window.pageXOffset? window.pageXOffset + window.innerWidth - 1: 0,
y = window.pageYOffset? window.pageYOffset + window.innerHeight - 1: 0,
względne = !! ((! x &&! y) ||! document.elementFromPoint (x, y));
function inside (child, parent) {
while (child) {
if (child === rodzic) return true;
child = child.parentNode;
}
return false;
};
return function (elem) {
Jeśli (
document.hidden ||
elem.offsetWidth == 0 ||
elem.offsetHeight == 0 ||
elem.style.visibility == 'ukryte' ||
elem.style.display == 'none' ||
elem.style.opacity === 0
) return false;
var rect = elem.getBoundingClientRect ();
if (względne) {
if (! inside (document.elementFromPoint (rect.left + elem.offsetWidth / 2, rect.top + elem.offsetHeight / 2), elem)) return false;
} else if (
! inside (document.elementFromPoint (rect.left + elem.offsetWidth / 2 + window.pageXOffset, rect.top + elem.offsetHeight / 2 + window.pageYOffset), elem) ||
(
rect.top + elem.offsetHeight / 2 <0 ||
rect.left + elem.offsetWidth / 2 <0 ||
rect.bottom - elem.offsetHeight / 2> (window.innerHeight || document.documentElement.clientHeight) ||
rect.right - elem.offsetWidth / 2> (window.innerWidth || document.documentElement.clientWidth)
)
) return false;
if (window.getComputedStyle || elem.currentStyle) {
var el = elem,
comp = null;
while (el) {
if (el === document) {break;} else if (! el.parentNode) return false;
comp = window.getComputedStyle? window.getComputedStyle (el, null): el.currentStyle;
if (comp && (comp.visibility == 'hidden' || comp.display == 'none' || (typeof comp.opacity! == 'undefined' && comp.opacity! = 1))) return false;
el = el.parentNode;
}
}
powrót prawda;
}
}) ();
Jak używać:
is_visible (elem) // boolean
|
Musisz sprawdzić zarówno ... Wyświetlanie, jak i widoczność:
if ($ (this) .css ("display") == "none" || $ (this) .css ("visibility") == "hidden") {
// Element nie jest widoczny
} else {
// Element jest widoczny
}
Jeśli sprawdzimy, czy $ (this) .is (": visible"), jQuery automatycznie sprawdza obie rzeczy.
|
Może możesz zrobić coś takiego
$ (document) .ready (function () {
var widoczne =$ ('# tElement'). is (': visible');
if (widoczne) {
alert ("widoczny");
// Kod
}
jeszcze
{
alert ("ukryty");
}
});
Imię
|
Po prostu sprawdź widoczność, sprawdzając wartość logiczną, taką jak:
if (this.hidden === false) {
// Twój kod
}
Użyłem tego kodu dla każdej funkcji. W przeciwnym razie możesz użyć is (': visible') do sprawdzenia widoczności elementu.
|
Ponieważ elementy z widocznością: ukryty lub krycie: 0 są uważane za widoczne, ponieważ nadal zajmują miejsce w układzie (jak opisano dla jQuery: visible Selector) - możemy sprawdzić, czy element jest naprawdę widoczny w ten sposób:
function isElementReallyHidden (el) {
return $ (el) .is (": ukryty") || $ (el) .css ("widoczność") == "ukryte" || $ (el) .css ('krycie') == 0;
}
var booElementReallyShowed =! isElementReallyHidden (someEl);
$ (someEl) .parents (). each (function () {
if (isElementReallyHidden (this)) {
booElementReallyShowed = false;
}
});
|
Ale co, jeśli CSS elementu wygląda następująco?
.element{
pozycja: bezwzględna; po lewej: -9999;
}
Więc ta odpowiedź na pytanie o przepełnienie stosu, jak sprawdzić, czy element jest poza ekranem, powinna również zostać uwzględniona.
|
Funkcję można utworzyć w celu sprawdzenia atrybutów widoczności / wyświetlania w celu oceny, czy element jest wyświetlany w interfejsie użytkownika, czy nie.
function checkUIElementVisible (element) {
return ((element.css ('display')! == 'none') && (element.css ('visibility')! == 'hidden'));
}
Working Fiddle
|
Tutaj jest również trójskładnikowe wyrażenie warunkowe, które sprawdza stan elementu, a następnie przełącza go:
$ ('someElement'). on ('click', function () {$ ('elementToToggle'). is (': visible')? $ ('elementToToggle'). hide ('slow'): $ ('elementToToggle ') .show (' wolno ');});
|
if ($ ('# postcode_div'). is (': visible')) {
if ($ ('# postcode_text'). val () == '') {
$ ('# spanPost'). text ('\ u00a0');
} else {
$ ('# spanPost'). text ($ ('# postcode_text'). val ());
}
|
1
2
Kolejny
Bardzo aktywne pytanie. Zdobądź 10 punktów reputacji, aby odpowiedzieć na to pytanie. Wymóg dotyczący reputacji pomaga chronić to pytanie przed spamem i brakiem odpowiedzi.
Nie szukasz odpowiedzi? Przeglądaj inne pytania otagowane javascript jquery dom widoczność lub zadaj własne pytanie.
Źródło:
Blogger Plug n Play - narzędzia i widżety jQuery: jak sprawdzić, czy element jest ukryty lub widoczny za pomocą jQuery
|
Można po prostu użyć atrybutu ukrytego lub widocznego, takiego jak:
$ („element: ukryty”)
$ („element: widoczny”)
Lub możesz uprościć to samo za pomocą następującego.
$ (element) .is (": widoczny")
|
ebdiv należy ustawić na style = "display: none;". Działa zarówno w przypadku pokazywania, jak i ukrywania:
$ (document) .ready (function () {
$ ("# eb"). click (function () {
$ ("# ebdiv"). toggle ();
});
});
|
Inną odpowiedzią, którą powinieneś wziąć pod uwagę, jest to, że jeśli ukrywasz element, powinieneś użyć jQuery, ale zamiast go ukrywać, usuwasz cały element, ale kopiujesz jego zawartość HTML i sam tag do zmiennej jQuery, wszystko, co musisz zrobić, to sprawdzić, czy na ekranie znajduje się taka zmienna, używając normalnego if (! $ ('# thetagname'). length).
|
Podczas testowania elementu pod kątem: hidden selector w jQuery należy wziąć pod uwagę, że bezwzględnie pozycjonowany element może zostać rozpoznany jako ukryty, mimo że jego elementy potomne są widoczne.
Przede wszystkim wydaje się to nieco sprzeczne z intuicją - chociaż bliższe przyjrzenie się dokumentacji jQuery daje istotne informacje:
Elementy można uznać za ukryte z kilku powodów: [...] Ich szerokość i wysokość są jawnie ustawione na 0. [...]
Więc to ma sens w odniesieniu do modelu pudełkowego i wyliczonego stylu elementu. Nawet jeśli szerokość i wysokość nie są jawnie ustawione na 0, mogą zostać ustawione niejawnie.
Spójrz na następujący przykład:
console.log ($ ('. foo'). is (': hidden')); // prawdziwe
console.log ($ ('. bar'). is (': hidden')); // fałszywy
.bla {
pozycja: bezwzględna;
po lewej: 10px;
top: 10px;
tło: # ff0000;
}
.bar {
pozycja: bezwzględna;
po lewej: 10px;
top: 10px;
szerokość: 20px;
wysokość: 20px;
tło: # 0000ff;
}
Aktualizacja dla jQuery 3.x:
Dzięki jQuery 3 opisane zachowanie ulegnie zmianie! Elementy będą uważane za widoczne, jeśli mają jakiekolwiek ramki układu, w tym te o zerowej szerokości i / lub wysokości.
JSFiddle z jQuery 3.0.0-alpha1:
http://jsfiddle.net/pM2q3/7/
Ten sam kod JavaScript będzie miał wtedy następujące dane wyjściowe:
console.log ($ ('. foo'). is (': hidden')); // fałszywy
console.log ($ ('. bar'). is (': hidden'));// fałszywy
|
To może zadziałać:
oczekiwać ($ ("# message_div"). css ("display")). toBe ("none");
|
Przykład:
$ (document) .ready (function () {
if ($ ("# checkme: hidden"). length) {
console.log ('Ukryty');
}
});
|
Aby sprawdzić, czy nie jest widoczny, używam!:
if (! $ ('# książka'). is (': visible')) {
alert („# książka nie jest widoczna”)
}
Lub następujący jest również sam, zapisujący selektor jQuery w zmiennej, aby uzyskać lepszą wydajność, gdy jest to potrzebne wiele razy:
var $ book = $ ('# książka')
if (! $ book.is (': visible')) {
alert („# książka nie jest widoczna”)
}
|
Użyj przełączania klas, a nie edycji stylu. . .
Korzystanie z klas przeznaczonych do „ukrywania” elementów jest łatwe i jednocześnie jest jedną z najbardziej wydajnych metod. Przełączenie klasy „ukrytej” ze stylem wyświetlania „brak” będzie działać szybciej niż bezpośrednia edycja tego stylu. Część z tego wyjaśniłem dość dokładnie w pytaniu o przepełnienie stosu Włączanie / ukrywanie dwóch elementów w tym samym div.
Sprawdzone metody JavaScript i optymalizacja
Oto naprawdę pouczające wideo z Google Tech Talk autorstwa inżyniera Google front-end Nicholasa Zakasa:
Przyspiesz swój JavaScript (YouTube)
|
Przykład użycia widocznego czeku na adblocker jest aktywowany:
$ (document) .ready (function () {
jeśli (! $ ("# ablockercheck"). is (": visible"))
$ ("# ablockermsg"). text ("Wyłącz adblocker."). show ();
});
„ablockercheck” to identyfikator blokowany przez adblocker. Więc sprawdzając, czy jest widoczny, jesteś w stanie wykryć, czy Adblocker jest włączony.
|
W końcu żaden z przykładów mi nie odpowiada, więc napisałem swój własny.
Testy (brak obsługi filtru Internet Explorer: alfa):
a) Sprawdź, czy dokument nie jest ukryty
b) Sprawdź, czy element ma zerową szerokość / wysokość / przezroczystość lub wyświetlanie: brak / widoczność: ukryte w stylach wbudowanych
c) Sprawdź, czy środek (również dlatego, że jest szybszy niż testowanie każdego piksela / rogu) elementu nie jest zakryty przez inny element (i wszystkich przodków, np. przepełnienie: ukryty / przewiń / jeden element nad drugim) czy krawędzie ekranu
d) Sprawdź, czy element ma zerową szerokość / wysokość / krycie lub wyświetlanie: brak / widoczność: ukryte w wyliczonych stylach (wśród wszystkich przodków)
Testowany
Android 4.4 (natywna przeglądarka / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac WebKit), Internet Explorer (Internet Explorer 5-11 tryby dokumentów + Internet Explorer 8 na maszyna wirtualna) i Safari (Windows / Mac / iOS).
var is_visible = (function () {
var x = window.pageXOffset? window.pageXOffset + window.innerWidth - 1: 0,
y = window.pageYOffset? window.pageYOffset + window.innerHeight - 1: 0,
względne = !! ((! x &&! y) ||! document.elementFromPoint (x, y));
function inside (child, parent) {
while (child) {
if (child === rodzic) return true;
child = child.parentNode;
}
return false;
};
return function (elem) {
Jeśli (
document.hidden ||
elem.offsetWidth == 0 ||
elem.offsetHeight == 0 ||
elem.style.visibility == 'ukryte' ||
elem.style.display == 'none' ||
elem.style.opacity === 0
) return false;
var rect = elem.getBoundingClientRect ();
if (względne) {
if (! inside (document.elementFromPoint (rect.left + elem.offsetWidth / 2, rect.top + elem.offsetHeight / 2), elem)) return false;
} else if (
! inside (document.elementFromPoint (rect.left + elem.offsetWidth / 2 + window.pageXOffset, rect.top + elem.offsetHeight / 2 + window.pageYOffset), elem) ||
(
rect.top + elem.offsetHeight / 2 <0 ||
rect.left + elem.offsetWidth / 2 <0 ||
rect.bottom - elem.offsetHeight / 2> (window.innerHeight || document.documentElement.clientHeight) ||
rect.right - elem.offsetWidth / 2> (window.innerWidth || document.documentElement.clientWidth)
)
) return false;
if (window.getComputedStyle || elem.currentStyle) {
var el = elem,
comp = null;
while (el) {
if (el === document) {break;} else if (! el.parentNode) return false;
comp = window.getComputedStyle? window.getComputedStyle (el, null): el.currentStyle;
if (comp && (comp.visibility == 'hidden' || comp.display == 'none' || (typeof comp.opacity! == 'undefined' && comp.opacity! = 1))) return false;
el = el.parentNode;
}
}
powrót prawda;
}
}) ();
Jak używać:
is_visible (elem) // boolean
|
Musisz sprawdzić zarówno ... Wyświetlanie, jak i widoczność:
if ($ (this) .css ("display") == "none" || $ (this) .css ("visibility") == "hidden") {
// Element nie jest widoczny
} else {
// Element jest widoczny
}
Jeśli sprawdzimy, czy $ (this) .is (": visible"), jQuery automatycznie sprawdza obie rzeczy.
|
Może możesz zrobić coś takiego
$ (document) .ready (function () {
var widoczne =$ ('# tElement'). is (': visible');
if (widoczne) {
alert ("widoczny");
// Kod
}
jeszcze
{
alert ("ukryty");
}
});
Imię
|
Po prostu sprawdź widoczność, sprawdzając wartość logiczną, taką jak:
if (this.hidden === false) {
// Twój kod
}
Użyłem tego kodu dla każdej funkcji. W przeciwnym razie możesz użyć is (': visible') do sprawdzenia widoczności elementu.
|
Ponieważ elementy z widocznością: ukryty lub krycie: 0 są uważane za widoczne, ponieważ nadal zajmują miejsce w układzie (jak opisano dla jQuery: visible Selector) - możemy sprawdzić, czy element jest naprawdę widoczny w ten sposób:
function isElementReallyHidden (el) {
return $ (el) .is (": ukryty") || $ (el) .css ("widoczność") == "ukryte" || $ (el) .css ('krycie') == 0;
}
var booElementReallyShowed =! isElementReallyHidden (someEl);
$ (someEl) .parents (). each (function () {
if (isElementReallyHidden (this)) {
booElementReallyShowed = false;
}
});
|
Ale co, jeśli CSS elementu wygląda następująco?
.element{
pozycja: bezwzględna; po lewej: -9999;
}
Więc ta odpowiedź na pytanie o przepełnienie stosu, jak sprawdzić, czy element jest poza ekranem, powinna również zostać uwzględniona.
|
Funkcję można utworzyć w celu sprawdzenia atrybutów widoczności / wyświetlania w celu oceny, czy element jest wyświetlany w interfejsie użytkownika, czy nie.
function checkUIElementVisible (element) {
return ((element.css ('display')! == 'none') && (element.css ('visibility')! == 'hidden'));
}
Working Fiddle
|
Tutaj jest również trójskładnikowe wyrażenie warunkowe, które sprawdza stan elementu, a następnie przełącza go:
$ ('someElement'). on ('click', function () {$ ('elementToToggle'). is (': visible')? $ ('elementToToggle'). hide ('slow'): $ ('elementToToggle ') .show (' wolno ');});
|
if ($ ('# postcode_div'). is (': visible')) {
if ($ ('# postcode_text'). val () == '') {
$ ('# spanPost'). text ('\ u00a0');
} else {
$ ('# spanPost'). text ($ ('# postcode_text'). val ());
}
|
1
2
Kolejny
Bardzo aktywne pytanie. Zdobądź 10 punktów reputacji, aby odpowiedzieć na to pytanie. Wymóg dotyczący reputacji pomaga chronić to pytanie przed spamem i brakiem odpowiedzi.
Nie szukasz odpowiedzi? Przeglądaj inne pytania otagowane javascript jquery dom widoczność lub zadaj własne pytanie.